import useControlFormStore from '@/store/controlForm';

export default function useForm() {
  const controlFormStore = useControlFormStore();
  const ctlSelectedIndex = ref(0); //选中的控件下标
  //选中控件信息
  const selectItem = computed({
    get: () => controlFormStore.selectFormItem,
    set: (val) => (controlFormStore.selectFormItem = val)
  });
  const remove = (arr: any[], index: number) => {
    arr.splice(index, 1);
    //不是移除当前选择的控件
    // 如果移除的控件下标大于当前选中控件的下标，选中的下标不变
    if (index > ctlSelectedIndex.value) return;
    // 如果移除的控件下标等于当前选中控件的下标，
    // 如果选中的下标大于1则设为前一个，否则则是移除下标为0的情况，此情况不需改变
    // 如果移除的控件下标小于当前选中控件的下标，选中的下标减一
    if (
      (index === ctlSelectedIndex.value && ctlSelectedIndex.value !== 0) ||
      index < ctlSelectedIndex.value
    )
      ctlSelectedIndex.value -= 1;
    formItemClick(arr[ctlSelectedIndex.value], ctlSelectedIndex.value);
  };
  // 点击选中一个控件
  const formItemClick = (element: any, index: number) => {
    element.validate = void 0; //取消验证错误样式
    selectItem.value = element;
    ctlSelectedIndex.value = index;
    console.log('element', element);
  };
  const change = (evt: any) => {
    // 判断增加added和移动moved，移除removed事件
    const keys = Object.keys(evt);

    if (keys.includes('moved')) {
      const { element, oldIndex, newIndex } = evt.moved;
      // 不影响选中控件下标的情况：移动控件的新旧下标都小于或者都大于选中的下标
      if (
        (oldIndex < ctlSelectedIndex.value &&
          newIndex < ctlSelectedIndex.value) ||
        (oldIndex > ctlSelectedIndex.value && newIndex > ctlSelectedIndex.value)
      )
        return;
      // 选中控件前面的控件与选中控件后面相邻位置
      if (
        oldIndex < ctlSelectedIndex.value &&
        newIndex === ctlSelectedIndex.value
      ) {
        ctlSelectedIndex.value -= 1;
        return;
      }
      // 选中控件后面的控件与选中控件前面相邻位置
      if (
        oldIndex > ctlSelectedIndex.value &&
        newIndex === ctlSelectedIndex.value
      ) {
        ctlSelectedIndex.value += 1;
        return;
      }
      // 如果移动的是选中控件
      if (oldIndex === ctlSelectedIndex.value) {
        ctlSelectedIndex.value = newIndex;
        return;
      }
      // 选中控件前面的控件移动到选中控件后面不相邻位置
      if (newIndex > ctlSelectedIndex.value) {
        ctlSelectedIndex.value -= 1;
        return;
      }
      // 选中控件后面的控件移动到选中控件前面不相邻位置
      if (newIndex < ctlSelectedIndex.value) {
        ctlSelectedIndex.value += 1;
        return;
      }
    }
    //拖动添加控件
    if (keys.includes('added')) {
      const { newIndex, element } = evt.added;
      formItemClick(element, newIndex);
    }
    //只有拖拽已经拖拽出来的控件到表格内部才会触发移除事件
    if (keys.includes('removed')) {
      // console.log("removed", evt);
    }
  };
  return {
    selectItem,
    ctlSelectedIndex,
    remove,
    formItemClick,
    change
  };
}
